<script setup lang="ts">
import {ref,h, reactive,onMounted} from 'vue';
import container from "../../components/container.vue";
import { IconCalendar } from '@arco-design/web-vue/es/icon';
import { storeToRefs } from "pinia";
import  { useTag } from "../../store/tag.ts"
import {menuData} from "../../api/menu/menu.ts"
const menudata = reactive({
  data:[]
})
const  getmenuData = ()=>{
  menuData().then(res=>{
    if( res &&'code' in res && res.code == 0 ){
      menudata.data = res.data
    }
    console.log('菜单',res.data,menudata)
  })
}
onMounted( ()=>{
  getmenuData()
} )
const {openTags} = storeToRefs(  useTag() )
// console.log('#####',openTags)
const expandedKeys = ref([]);

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});

//显示隐藏模态框
const modalvisible = ref(false)
//菜单类型
const menuType = ref({})

const add = () => {
  modalvisible.value = true
}
const handleOk = (event) => {
  console.log('点击确定', event);
  modalvisible.value = false
}
const select_option = reactive([
  {
    pagsNum: 'p10',
    text: '10 条 / 页'
  },
  {
    pagsNum: 'p20',
    text: '20 条 / 页'
  },
  {
    pagsNum: 'p30',
    text: '30 条 / 页'
  },
  {
    pagsNum: 'p50',
    text: '50 条 / 页'
  },
]);

const data = reactive([{
  key: '1',
  name: 'Jane Doe',
  salary: 23000,
  address: '32 Park Road, London',
  email: 'jane.doe@example.com',
  children: [{
    key: '2',
    name: 'Alisa Ross',
    salary: 25000,
    address: '35 Park Road, London',
    email: 'alisa.ross@example.com',
  }, {
    key: '5',
    name: 'Alisa Ross',
    salary: 25000,
    address: '35 Park Road, London',
    email: 'alisa.ross@example.com',
    isLeaf: true,
  }]
}, {
  key: '6',
  name: 'Alisa Ross',
  salary: 25000,
  address: '35 Park Road, London',
  email: 'alisa.ross@example.com',
}, {
  key: '7',
  name: 'Kevin Sandra',
  salary: 22000,
  address: '31 Park Road, London',
  email: 'kevin.sandra@example.com',
  isLeaf: true,
}, {
  key: '8',
  name: 'Ed Hellen',
  salary: 17000,
  address: '42 Park Road, London',
  email: 'ed.hellen@example.com',
  isLeaf: true,
}, {
  key: '9',
  name: 'William Smith',
  salary: 27000,
  address: '62 Park Road, London',
  email: 'william.smith@example.com',
  isLeaf: true,
}])






const columns = [{
  title: 'Name',
  dataIndex: 'name',
}, {
  title: 'Salary',
  dataIndex: 'salary',
}, {
  title: 'Address',
  dataIndex: 'address',
}, {
  title: 'Email',
  dataIndex: 'email',
}, {
  title: 'Optional',
  slotName: 'optional'
}];

/**========================================*/
const fieldNames = {value: 'pagsNum', label: 'text'}
const value = ref('p10')

</script>

<template>
  <container :displayNavigation="true">

    <a-modal v-model:visible="modalvisible" @ok="handleOk" >
      <template #title>
        添加菜单
      </template>
      <a-space  direction="vertical" fill size="large">
      <div class="addMenuform">
        <a-space size="large">
          <label><span style="color: #f90">*</span>菜单类型 </label>
          <a-space size="large" style="width:300px">
            <a-radio-group direction="horizontal">
              <a-radio value="A">菜单</a-radio>
              <a-radio value="B">目录</a-radio>
              <a-radio value="C">按钮</a-radio>
            </a-radio-group>
          </a-space>
        </a-space>
      </div>
      <div class="addMenuform">
<!--        <a-space size="large">-->
<!--          <label><span style="color: #f90">*</span>父级菜单 </label>-->
<!--          <a-tree-select-->
<!--              :data="treeData"-->
<!--              placeholder="请选择"-->
<!--              style="width: 300px"-->
<!--          ></a-tree-select>-->
<!--        </a-space>-->
      </div>
      <div class="addMenuform">
        <a-space size="large">
          <label><span style="color: #f90">*</span>菜单名称  </label>
          <a-input style="width:300px"  placeholder="请输入菜单名称" allow-clear />
        </a-space>
      </div>
      </a-space>
    </a-modal>
    <div class="show-table">
      <a-button type="primary" @click="add" style="margin-bottom: 20px">
        <template #icon>
          <icon-plus/>
        </template>
        <template #default>添加</template>
      </a-button>
    <a-table :columns="columns" :data="data"  >
      <template #optional="{ record }">
        <a-button @click="">{{ record.name }}</a-button>
        <a-button @click="">view</a-button>
      </template>
      <template  #pagination-left>
          共 1000 条
      </template>
      <template  #pagination-right>
        <a-select :style="{width:'140px'}" :options="select_option" v-model="value" :field-names="fieldNames"
                  placeholder="sss" size="large">
        </a-select>
      </template>
    </a-table>
    </div>

  </container>
</template>

<style scoped lang="scss">
.addMenuform{
  text-align: center;
}
.show-table{
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}
</style>